
$(function () {
    $.ajax({
        url: "http://localhost:8080/src/json/data1.json "
    })
        .done(function (res) {
            shulist(res.data3)
            shulist2(res.data3_2)
            pic_img_n6(res.data4)
            pic_img(res.data5)
            starProduct_movex8(res.data6)
            dianx8(res.data7)
            dianx4(res.data9)
        })
        .then(function () {
            foolr()
            $(".lazy").lazyload();
        })

    // banner内导航_电视
    function shulist(res) {
        $(".shulist").html($.map(res, function (item) {
            return `
            <a href="${item.herf}">
            <img src="${item.image}" alt="">
            <span>${item.name}</span>
            </a>
            `
        }).join(""))
    }
    // banner内导航_冰箱
    function shulist2(res) {
        $(".shulist2").html($.map(res, function (item) {
            return `
            <a href="${item.herf}">
            <img src="${item.image}" alt="">
            <span>${item.name}</span>
            </a>
            `
        }).join(""))
    }

    //banner下6个小图片
    function pic_img_n6(res) {
        $(".pic_img_n6").html($.map(res, function (item) {
            return `
            <a href="">
            <img src="${item.src}" alt="">
            ${item.name}
            </a>
            `
        }).join(""))
    }
    //banner下图片
    function pic_img(res) {
        $(".pic_img").append($.map(res, function (item) {
            return `
             <div class="pic_img_n3">
                <a href="${item.src}">
                    <img class="lazy" src="${item.image}" alt="">
                </a>
            </div>
            `
        }).join(""))
    }
    //按钮点击更换页
    var $starProduct_movex8 = $(".starProduct-movex8")
    function starProduct_movex8(res) {
        $starProduct_movex8.html($.map(res, function (item) {
            return `<div>
            <a href="../../dist/details.html">
            <img class="lazy" src="${item.image}" alt=""></a>
            <h4>${item.title}</h4>
            <p>${item.figuretitle}</p>
            <span class="s1">${item.price}</span>
            <span class="s2">${item.del}</span>
        </div>`
        }).join(""))
    }
    //  两个点击事件
    $(".starProduct-left").on("click", function () {
        $starProduct_movex8.stop(true).animate({
            left: 0
        }, 500)
    })
    $(".starProduct-right").on("click", function () {
        $starProduct_movex8.stop(true).animate({
            left: -1140
        }, 500)
    })

    //类别展示
    //电视
    //冰箱
    function dianx8(res) {
        $(".dianx8").html($.map(res, function (item) {
            return `
            <div class="box1">
                <a href="javascript:void(0)">
                <img class="lazy" src="${item.image}" alt="">
                </a>
                <h4>${item.title}</h4>
                <p>${item.figuretitle}</p>
                <span class="s1">${item.price}</span>
                <span class="s2">${item.del}</span>
            </div>
            `
        }).join(""))
    }
    //洗衣机~K迷优品
    function dianx4(res) {
        $(".dianx4").html($.map(res, function (item) {
            return `
            <div class="box1">
                <a href="${item.href}">
                <img class="lazy" src="${item.image}" alt="">
                </a>
                <h4>${item.title}</h4>
                <p>${item.figuretitle}</p>
                <span class="s1">${item.price}</span>
                <span class="s2">${item.del}</span>
            </div>
            `
        }).join(""))
    }
    // 楼梯
    function foolr() {

        var $foolr = $(".floor li")
        var $title = $(".title")
        var height = [];
        $(window).scroll(function () {
            var scrolltop = $("html,body").scrollTop();
            if (scrolltop >= 600) {
                $(".floor").stop(true).animate({
                    opacity: 1,
                }, 300)
            } else {
                $(".floor").stop(true).animate({
                    opacity: 0,
                }, 300)
            }
        })
        for (var i = 0; i < $title.length; i++) {
            var _top = $title.eq(i).offset().top
            _top -= 80
            height.push(parseInt(_top))
        }
        $foolr.click(function () {
            var index = $(this).index();
            $("html,body")
                .stop(true)
                .animate({
                    scrollTop: height[index]
                });
        });
    }
})
